<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-22 19:53:51
 * @LastEditors: your name
 * @LastEditTime: 2021-05-07 14:47:51
 * @Description: file content
-->
<template lang="html">

  <el-dialog
    :visible="showVisible"
    center
    :show-close="false"
    width="600px"
    class="code-editor-dialog"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ i18n.t('sys.reset_password') }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <el-form
      class="pl30 pr30"
      :model="formData"
      ref="form"
      label-width="120px"
      label-position="right"
    >
      <el-form-item
        :label="i18n.t('sys.password')"
        prop="password"
        :rules="[
          { required: true, message: i18n.t('sys.password_not_null'), trigger: 'change' },
          { pattern: pwdCheck ? PASSWORD_COMPLEX_REG : PASSWORD_REG, 
            message: i18n.t('sys.enter_valid_password'), trigger: 'change' },
        ]"
      >
        <template slot="label">{{i18n.t('sys.password')}}
          <el-tooltip popper-class="custom-popper" placement="top">
            <div slot="content">
              <div>{{ i18n.t('sys.' + (pwdCheck ? PASSWORD_COMPLEX_REG_MSG_I18N : PASSWORD_REG_MSG_I18N)) }}</div>
              <div class="mt5">{{i18n.t('sys.default_password')}}</div>
            </div>
            <i class="el-icon-question" />
          </el-tooltip>
        </template>
        <div style="width: 400px;display:flex">
          <el-input
            autocomplete="new-password"
            v-model="formData.password"
            :placeholder="i18n.t('sys.enter_password')"
            :maxlength="32"
            show-word-limit
            show-password
          />
          <el-button style="margin-left: 10px" type="text" @click="handleRandom">{{i18n.t('sys.random_password')}}</el-button>
        </div>
      </el-form-item>

    </el-form>

    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">{{i18n.t('sys.cancel')}}</el-button>
      <el-button type="primary" @click="submit">{{i18n.t('sys.confirm')}}</el-button>
    </div>

  </el-dialog>

</template>

<script>
import i18n from '../../i18n'
import md5 from 'md5'
import { randomString,randomStringStrong } from '@/utils/util'
import { PASSWORD_REG, PASSWORD_REG_MSG, PASSWORD_REG_MSG_I18N,PASSWORD_COMPLEX_REG,PASSWORD_COMPLEX_REG_MSG_I18N } from '@/utils/reg'
const DEFAULT_PASSWORD = '111111'
import storeform from "@/store";
export default {
  name: 'ResetPassword',
  data () {
    return {
      PASSWORD_REG,
      PASSWORD_REG_MSG,
      PASSWORD_REG_MSG_I18N,
      PASSWORD_COMPLEX_REG,
      PASSWORD_COMPLEX_REG_MSG_I18N,
      formData: { },
      showVisible: false,
      callback: null,
      i18n,
    }
  },

  created () {},

  computed: {
    pwdCheck() {
      return storeform.getters.APP_INFO.pwdCheck || false;
    },
  },

  methods: {
    open (data = {}, callback) {
      this.$set(this.formData, 'password', DEFAULT_PASSWORD)
      this.callback = callback
      this.showVisible = true
    },

    handleRandom () {
      if(this.pwdCheck){
        this.formData.password = randomStringStrong(6)
      }else{
        this.formData.password = randomString(6)
      }
    },

    async submit () {
      try {
        await this.$refs.form.validate()
        const { password } = this.formData
        this.callback && this.callback(md5(password.trim()))
        this.showVisible = false
      } catch (error) {
        console.log(error)
      }
    }
  }

}
</script>

<style lang="css">
</style>
